<script>
 export default {
   name: 'SideIconMenu',
   data() {
     return {
       activeId: 1,
       lastMenu: '',
       menuMapping: [
         {
           id: 1,
           name: 'messages'
         },
         {
           id:2,
           name: 'circle'
         },
         {
           id:3,
           name: 'friends'
         },
         {
           id:4,
           name: 'settings'
         }
       ]
     }
   },
   methods: {
     activateMenu(id) {
       this.activeId = id;
       let latestMenuName = this.menuMapping[id];
       this.$emit('menuClicked', latestMenuName);
       if(latestMenuName !== this.lastMenu) {
         this.lastMenu = latestMenuName;
         this.$emit('menuChanged', latestMenuName);
       }
     }
   }
 }
</script>

<template>
  <div class="w-[70px] bg-gray-900 h-full flex flex-col justify-start items-center pt-[10px] text-[0.7em]  text-gray-400 ml-auto">
    <div class="mt-5 w-[45px] h-[45px] rounded bg-white object-cover overflow-hidden">
      <img draggable="false" src="../assets/images/final-logo.png" class="select-none" >
    </div>

    <div @click="activateMenu(1)" class="w-[55px] h-[55px] hover:bg-gray-700 rounded mt-5 flex flex-col items-center pt-[5px]" :class="activeId === 1 ? 'bg-gray-700':''">
      <div class="w-[30px] h-[30px] text-2xl text-center">
        <fai icon="message" />
      </div>
      <span class="pt-[3px]">پاراڭ</span>
    </div>

    <div @click="activateMenu(2)" class="w-[55px] h-[55px] hover:bg-gray-700 rounded mt-5 flex flex-col items-center pt-[5px]" :class="activeId === 2 ? 'bg-gray-700':''">
      <div class="w-[30px] h-[30px] text-2xl text-center">
        <fai icon="moments"/>
      </div>
      <span class="pt-[3px]">چەمبىرەك</span>
    </div>

    <div @click="activateMenu(3)" class="w-[55px] h-[55px] hover:bg-gray-700 rounded mt-5 flex flex-col items-center pt-[5px]" :class="activeId === 3 ? 'bg-gray-700':''">
      <div class="w-[30px] h-[30px] text-2xl text-center">
        <fai icon="contacts"/>
      </div>
      <span class="pt-[2px]">دوستلار</span>
    </div>

    <div @click="activateMenu(4)" class="w-[55px] h-[55px] hover:bg-gray-700 rounded mt-auto mb-2 flex flex-col items-center pt-[5px]" :class="activeId === 4 ? 'bg-gray-700':''">
      <div class="w-[30px] h-[30px] text-2xl text-center">
        <fai icon="gears"/>
      </div>
      <span class="pt-[2px]">تەڭشەك</span>
    </div>


  </div>
</template>

<style scoped>

</style>